<template>
    <!-- 
      1. 事件冒泡演示：
         - 子元素事件触发后，会向上传递到父元素
         - .stop修饰符可阻止事件冒泡
    -->
    <div v-on:click="show('我是父元素的事件（冒泡）')">
        父元素容器
        <button v-on:click="show('我是子元素的事件（会冒泡）')">
            事件冒泡（点击后父子事件都会触发）
        </button>
        <button v-on:click.stop="show('我是子元素的事件（已阻止冒泡）')">
            阻止事件冒泡（点击后只触发子事件）
        </button>  
    </div>

    <!-- 
      2. 事件捕获演示：
         - 与冒泡相反，事件从外层向内层传播
         - .capture修饰符开启捕获模式
    -->
    <div v-on:click.capture="show('我是父元素的事件（捕获）')">
        父元素容器（捕获模式）
        <button v-on:click="show('我是子元素的事件（捕获阶段触发）')">
            事件捕获（点击后先触发父事件，再触发子事件）
        </button>
    </div>

    <!-- 
      3. 事件只触发一次：
         - .once修饰符使事件处理函数只执行一次
    -->
    <div>
        <button v-on:click.once="show('我是单击事件（只执行一次）')">
            事件只触发一次（第二次点击无反应）
        </button>
    </div>

    <!-- 
      4. .self修饰符演示：
         - 只有事件直接作用于当前元素时才触发
    -->
    <div v-on:click="show('我是祖先元素的事件')">
        祖先元素
        <div v-on:click.self="show('我是父元素的事件（仅自身触发）')">
            父元素（.self修饰符）
            <div v-on:click="show('我是子元素的事件')">
                子元素（点击后会冒泡到祖先，但父元素不响应）
            </div>
        </div>
    </div>

    <!-- 
      5. .passive修饰符演示：
         - 用于滚动事件，提升性能
    -->
    <div style="height:100px;overflow:auto" v-on:scroll.passive="onScroll">
        滚动我（.passive提升性能）<br>
        测试内容<br>测试内容<br>测试内容<br>测试内容<br>
        测试内容<br>测试内容<br>测试内容<br>测试内容<br>
    </div>

    <!-- 
      6. 按键修饰符演示：
         - .enter.exact确保只有纯Enter键触发
    -->
    <div>
        <input 
            type="text" 
            placeholder="按Enter键触发"
            v-on:keyup.enter.exact="submit"
        >
    </div>

    <!-- 
      7. 鼠标按钮修饰符：
         - .left/.right区分左右键，.prevent阻止默认菜单
    -->
    <div>
        <button v-on:click.left="show('我是左键点击事件')">
            左键点击
        </button>
        <button v-on:click.right.prevent="show('我是右键点击事件')">
            右键点击
        </button>
    </div>
</template>

<script setup>
// 通用事件处理函数：打印消息到控制台
let show = (msg) => {
    console.log(msg)
}

// 回车键提交处理函数
let submit = () => {
    console.log('捕获到纯Enter键（无其他组合键）')
}

// 滚动事件处理函数
let onScroll = () => {
    console.log('滚动事件触发（.passive提升性能）')
}
</script>
    